import React from 'react';
// 引入页头组件
import Pagehead from '@/component/pagehead';
// 引入模态框组件
import MyModal from '@/component/myModal';
// 引入用户相关接口
import {getuserlist,deluserFn} from '@/api/user'
// 引入分页组件
import Paging from '@/component/paging';
import { Space, Table, Tag,Button,message } from 'antd';
import { useState,useEffect ,useRef} from 'react';
const Index = () => {
    //定义表格列
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'id',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
            key: 'id',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'id',
        },
        {
            title: '性别',
            key: 'id',
            dataIndex: 'gender',
            render: (tags) => {
                // tags 就是该列数据对象中对应gender的value值
                let color = tags;
                let sex = '男'
                switch (color) {
                    case '1':
                        color = 'error'
                        sex = '男'
                        break;
                    case '2':
                        color = 'success'
                        sex = '女'
                        break;
                    default:
                        color = 'warning'
                        sex = '保密'
                        break;
                }

                return <Tag color={color}>
                    {sex}
                </Tag>
            }
        },
        {
            title: '状态',
            key: 'id',
            dataIndex: 'status',
            render: (tags) => {
           
                return (
                    <Tag color={tags==1?'success':'error'}>
                        {tags==1?'正常':'禁用'}
                    </Tag>
                );
                },
        },
        {
          title: '操作',
          key: 'id',
          render: (_, record) => (
            <Space size="middle">
                <Button type='primary' onClick={() => editUserFn(record)} >编辑</Button>
                <Button type='primary' danger onClick={() => deleteUserFn(record)} >删除</Button>
            </Space>
          ),
        },
      ]
    //定义请求到的用户列表数组
    const [userlist, setuserlist] = useState([]);
     //定义当前页数
    const [page, setpage] = useState(1);
     // 定义总数据条数
    const [total, settotal] = useState(0);
    // 请求用户列表数据
    async function getuserlistFn(params){
        const res = await getuserlist(params)
        console.log('用户列表数据',res);
        if(res.data.errNo == 0){
            setuserlist(res.data.paginate.data)//将请求到的用户数据赋值给userlist
            settotal(res.data.paginate.total)
        }
    }
    // 初始化请求用户列表数据
    useEffect(() => {
        getuserlistFn({page})
    }, [page]);
    const ref1 = useRef()
    //定义添加用户方法
    const addUserFn=()=>{
        //1、弹出模态框
        ref1.current.showModal()
        // 2、修改模态框标题
        ref1.current.setModaltitle('添加')
        //清空历史信息 
        ref1.current.setcurrentUser({})

    }
    //定义编辑用户的方法
    const editUserFn=(record)=>{
        //1、弹出模态框
        ref1.current.showModal()
        // 2、修改模态框标题
        ref1.current.setModaltitle('编辑')
        //03: 进行数据的回填
        ref1.current.setcurrentUser(record)
    }
    //定义删除用户的方法
    const deleteUserFn=(record)=>{
        deluserFn(record).then(res=>{
            if(res.data.errNo == 0){
                message.success('删除成功', 1, ()=>{
                    // 重新渲染数据，重新请求用户列表
                    getuserlistFn({page})
                })
            } else {
                message.error(res.data.errText, 1)
            }
        })
    }
   
    return (
        <>
            {/* 用户列表页 */}
            {/* 页头组件 */}
            <Pagehead title='用户列表'>
                <Button type='primary' onClick={addUserFn}>添加</Button>
            </Pagehead>
            {/* 表格组件 */}
            <Table columns={columns} dataSource={userlist} rowKey={(record) => record.id}/>
            {/* 模态框组件 */}
            <MyModal ref = {ref1} getuserlistFn={getuserlistFn} page={page}></MyModal>
            {/* 分页组件 */}
            <Paging page={page} total = {total} setpage={setpage}></Paging>
        </>
    );
}

export default Index;
